<template>
  <div>
    <!--  登录或注册的遮挡层    -->
    <div class="mask"></div>
    <div class="fixed">
      <div class="dialog">
        <div class="left">
          <img src="@/assets/logo.gif" alt="" class="logo">
        </div>
        <div class="right">
          <i class="right-close" @click="closeDialog">❌</i>
          <p class="right-title">登录/注册</p>
          <ValidationObserver ref="form">
            <div class="phone">
              <ValidationProvider name="phone" rules="required|mobile" v-slot="{errors}">
                <el-input placeholder="请输入手机号" v-model="phone">
                  <template slot="prepend">+86</template>
                </el-input>
                <i class="error"> {{ errors[0] }}</i>
              </ValidationProvider>
            </div>
            <div class="password">
              <ValidationProvider name="code" rules="required|pwd" v-slot="{errors}">
                <!--                <el-input placeholder="请输入验证码" v-model="code">
                                  <el-button
                                      slot="append"
                                      :disabled="!correctPhone || codeTime > 0"
                                      :style="{'color': !correctPhone || codeTime > 0 ?'#ccc':'#000'}"
                                      @click="sendCode"> {{ codeTime > 0 ? '重新获取 ' + codeTime : '获取验证码' }}
                  </el-button>
                </el-input>-->
                <el-input placeholder="请输入密码" v-model="password"/>
                <i class="error"> {{ errors[0] }}</i>
              </ValidationProvider>
            </div>
          </ValidationObserver>
          <el-button class="login-btn" @click="submit">登录/注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  props: {
    close: {
      Function,
      required: true
    }
  },
  data() {
    return {
      phone: null,  // 手机
      password: null, // 密码
      codeTime: 0  // 记录验证码倒计时时间
    }
  },
  computed: {
    // 用于控制发送验证码按钮是否可以点击
    correctPhone() {
      return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/.test(this.phone)
    }
  },
  methods: {
    // 关闭dialog
    closeDialog() {
      // 重置表单规则
      this.$refs.form.reset();
      // 调用父组件的函数
      this.close()
    },
    // 登录或注册
    submit() {
      this.$refs.form.validate().then(async success => {
        if (!success) return
        const {phone, password} = this
        this.$store.dispatch('login/login', {phone, password})
        // 调用父组件的函数
        this.close()
      });
    },
  }
}
</script>

<style lang="less" scoped>
.phone, .password {
  position: relative;
}

.phone {
  .error {
    position: absolute;
    color: red;
    top: 40px;
    left: 0;
  }
}

.password {
  .error {
    position: absolute;
    color: red;
    top: 40px;
    left: 0;
  }
}

// 登录和注册框的遮挡层
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  z-index: 1001;
  background: #000;
}

.fixed {
  position: fixed;
  z-index: 1004;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

.dialog {
  display: flex;
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  margin-top: 15vh;
  width: 640px;
  z-index: 1003;

  .left {
    display: flex;
    justify-content: center;
    width: 220px;
    height: 460px;
    background-image: url(https://static1-music.taihe.com/client/img/ac6dec3.png);
  }

  .right {
    flex: 1;
    overflow: hidden;
    padding: 40px;
    color: #868686;
    -moz-user-select: none; /* Firefox私有属性 */
    -webkit-user-select: none; /* WebKit内核私有属性 */
    -ms-user-select: none; /* IE私有属性(IE10及以后) */
    -khtml-user-select: none; /* KHTML内核私有属性 */
    -o-user-select: none; /* Opera私有属性 */
    user-select: none; /* CSS3属性 */

    ::v-deep .el-input-group__prepend {
      background-color: #fff;
    }

    ::v-deep .el-input__inner:focus {
      border-color: #DCDFE6;
    }

    ::v-deep .el-input--suffix {
      width: 80px;
    }

    ::v-deep .el-input-group__append {
      background: #fff;
      color: #000;
    }

    .login-btn {
      width: 100%;
      background: #e61723;
      color: #fff;
      height: 45px;
    }

    .right-title {
      font-size: 22px;
    }

    .right-close {
      cursor: pointer;
      position: absolute;
      right: 30px;
      top: -10px;
      font-size: 20px;
    }
  }

  .logo {
    margin-top: 100px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}
</style>
